<template>
  <div class="CPT_Time">
    <div class="clockArea">
      <div
        class="brTime flexMode flexV hc vc p0-10 hover-white1"
        :class="clockClass"
        @click="showTime"
      >
        <div>{{ time }}</div>
        <div>{{ date }}</div>
      </div>
      <div class="fullTime backdrop" :class="showFullTime ? 'active' : ''">
        <div class="txt-c pt20">
          <div class="fs30 txt-dark5">{{ fullTime }}</div>
          <div class="fs14 txt-dark3 space5 pl10">{{ date }}</div>
        </div>
        <div class="flexMode hc p20 fulltime" style="height: 240px">
          <Clock v-if="showFullTime" size="100" sep="8" />
        </div>
        <div class="taskArea">
          <Task :height="taskHeight" />
        </div>
      </div>
    </div>
    <div
      class="bgArea"
      :class="showFullTime ? 'active' : ''"
      @click="hideTime"
    />
  </div>
</template>
<script>
export default {
  inheritAttrs: false,
  name: "CPT_Time",
  props: {
    clockClass: {
      type: String,
      default: "fs12 txt-fff",
    },
  },
  data() {
    return {
      time: "",
      date: "",
      fullTime: "00:00:00",
      showFullTime: false,
      taskHeight: document.body.clientHeight - 240 - 78 - 48,
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.date = this.$getFullDateTime(new Date(), "date")
      this.timer = this.$setInterval(
        () => {
          const time = this.$getFullDateTime(new Date(), "hh:mm")
          if (this.time !== time) {
            this.time = time
          }
        },
        1000,
        this.timer
      )
    },
    showTime() {
      if (this.showFullTime) {
        this.hideTime()
        return
      }
      this.showFullTime = true
      this.timer2 = this.$setInterval(
        () => {
          this.fullTime = this.$getFullDateTime(new Date(), "time")
        },
        1000,
        this.timer2
      )
    },
    hideTime() {
      this.showFullTime = false
      clearInterval(this.timer2)
    },
  },
}
</script>
<style lang="scss" scoped>
.clockArea {
  position: relative;
  z-index: 2;
  .brTime {
    height: 3rem;
    text-shadow: $dark5 0 0 1px;
  }
  .fullTime {
    background-color: $white7;
    position: absolute;
    box-shadow: $dark1 -0.5rem 0 $dis5;
    bottom: 3rem;
    width: 20rem;
    right: 0;
    transition: $trans1;
    border: 1px $white1 solid;
    border-radius: 8px 0 0 0;
    transform: translateX(20rem);
    opacity: 0;
    &.active {
      opacity: 1;
      transform: translateX(0);
    }
    .fulltime {
      border-bottom: 1px $dark1 solid;
    }
  }
}
.bgArea {
  position: fixed;
  top: 0;
  left: 100%;
  right: 0;
  bottom: 0;
  z-index: 1;
  &.active {
    left: 0;
  }
}
</style>
